<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        1.注册全局指令

        2.注册局部指令

     -->
    <div id="test1">
        <p v-upper-text="msg1"></p>
        <p v-lower-text="msg1"></p>
    </div>
    <div id="test2">
        <p v-upper-text="msg2"></p>
        <p v-lower-text="msg2"></p>
    </div>
    <script src="./vue.js"></script>
    <script>
        //全局自定义属性
        //el:指令所在的标签对象     binging：包含指令相关数据的对象
        Vue.directive('upper-text', function(el, binging) {
            console.log(el, binging);
            el.textContent = binging.value.toUpperCase();
        });
        new Vue({
            el: "#test1",
            data: {
                msg1: 'NBA',
            },
            directives: { //局部自定义属性
                'lower-text' (el, binging) {
                    el.textContent = binging.value.toLowerCase();
                }
            }
        })
        new Vue({
            el: "#test2",
            data: {
                msg2: 'wzc',
            },
            directives: {
                'lower-text' (el, binging) {
                    el.textContent = binging.value.toLowerCase();
                }
            }
        })
    </script>
</body>

</html>